<template>
  <a-modal
    width="800px"
    v-model="showAddressModal"
    centered
    :footer="false"
  >
    <template #closeIcon>
      <section class="flex items-start justify-end px-4 pt-8">
        <a-icon type="close"/>
      </section>
    </template>
    <div ref="map" style="height: 400px;"/>
  </a-modal>
</template>
<script>
import AMap from 'AMap'
export default {
  name: 'AddressComp',
  data() {
    return {
      showAddressModal: false,
      aMap: null,
      pin: require('@/assets/icons/pin.png')
    }
  },
  watch: {
    showModal(val) {
      if (!val) {
        this.aMap.destory()
        this.aMap = null
      }
    }
  },
  methods: {
    setMapPoint(data) {
      this.showAddressModal = true
      const {longitude, latitude, content} = data
      this.$nextTick(() => {
        if (!this.aMap) {
          this.aMap = new AMap.Map(this.$refs.map, {
            resizeEnable: true,
            zoom: 16
          })
        }
        const position = [longitude, latitude]
        this.aMap.setCenter(position, true, 0)
        var marker = new AMap.Marker({
          position,
          icon: this.pin,
          anchor: 'bottom-center',
          offset: new AMap.Pixel(0, 0)
        })
        marker.setMap(this.aMap)
        marker.setLabel({
          direction: 'top',
          offset: new AMap.Pixel(0, -10),
          content
        })
      })
    }
  }
}
</script>
<style scoped lang="less">
  /deep/ .amap-markers {
    .amap-icon {
      img {
        width: 25px;
        height: 25px;
      }
    }
    .amap-marker-label {
      position: absolute;
      z-index: 2;
      border: none;
      background-color: #fff;
      white-space: nowrap;
      cursor: default;
      padding: 10px 12px;
      font-size: 14px;
      line-height: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
      border-radius: .25rem;
    }
  }
</style>
